<template>
  <div>
    <template>
      <!-- <template v-if="!item.children || !item.children.length || item.meta.single">
        <t-menu-item
          v-if="getHref(item)"
          :key="`href${item.path}`"
          :href="getHref(item) ? getHref(item)[0] : ''"
          :name="item.path"
          :value="item.meta.single ? item.redirect : item.path"
        >
          <template #icon>
            <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
            <renderFnIcon :item="item" />
          </template>
          {{ item.title }}
        </t-menu-item>
        <t-menu-item
          v-else
          :key="`${item.path}`"
          :to="item.path"
          :name="item.path"
          :value="item.meta.single ? item.redirect : item.path"
        >
          <template #icon>
            <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
            <renderFnIcon :item="item" />
          </template>
          {{ item.title }}
        </t-menu-item>
      </template>
      <t-submenu v-else :name="item.path" :value="item.path" :title="item.title" :key="item.path">
        <template #icon>
          <t-icon v-if="typeof item.icon === 'string' && item.icon" :name="item.icon" />
          <renderFnIcon :item="item" />
        </template>
        <menu-content v-if="item.children" :nav-data="item.children" />
      </t-submenu> -->
			<t-menu-group v-for="(item, key) in list" :key="`menu-group-${key}`" :title="item.title">
				<t-menu-item
						v-for="(childItem, childIndex) in item.children" :key="`menu-item-${key}-${childIndex}`"
						:href="getHref(childItem) ? getHref(childItem)[0] : ''"
						:to="childItem.path"
						:name="childItem.path"
						:value="childItem.meta.single ? childItem.redirect : childItem.path"
					>
					<template #icon>
            <renderFnIcon :item="childItem" />
          </template>
					{{ childItem.title }}
				</t-menu-item>
			</t-menu-group>
    </template>
  </div>
</template>

<script>
import Vue from 'vue';

import { prefix } from '@/config/global';
import RenderFnIcon from "@/layouts/components/RenderFnIcon";

export default Vue.extend({
  name: 'MenuContent',
  props: {
    navData: Array,
  },
  components:{RenderFnIcon},
  data() {
    return {
      prefix,
    };
  },
  computed: {
    list() {
      return this.getMenuList(this.navData);
    },
  },
  methods: {
    getHref(item) {
      return item.path.match(/(http|https):\/\/([\w.]+\/?)\S*/);
    },
    getMenuList(list, basePath){
      if (!list) {
        return [];
      }

      return list
          .map((item) => {
            const path = basePath && !item.path.includes(basePath) ? `${basePath}/${item.path}` : item.path;
            return {
              path,
              title: item.meta?.title,
              icon: item.meta?.icon || '',
              children: this.getMenuList(item.children, path),
              meta: item.meta,
              redirect: item.redirect,
            };
          })
          .filter((item) => item.meta && item.meta.hidden !== true);
    }
  },
});
</script>
